<script>
/*
    vuex: 
        多个组件需要使用同一个数据的时候,我们可以使用 vuex

    State: 用来放全局状态(数据)的地方
        有四种获取方式：
        1、在模板中通过 {{ $store.state.count }}
        2、在 js 中使用通过  console.log(this.$store.state.count);
        3、通过辅助函数的方式进行获取
            import { mapState } from 'vuex'
            computed: { ...mapState(['count']) }
        4、在组合式 API 中可以通过 
            import { useStore } from 'vuex'
            const store = useStore()
            console.log(store.state.count);
    
    Getter: 全局状态的计算属性
        有四种获取方式：
        1、在模板中通过 {{ $store.getters.calcCount }}
        2、在 js 中使用通过  console.log(this.$store.getters.calcCount);
        3、通过辅助函数的方式进行获取
            import { mapGetters } from 'vuex'
            computed: { ...mapGetters(['calcCount']) }
        4、在组合式 API 中可以通过 
            import { useStore } from 'vuex'
            const store = useStore()
            console.log(store.getters.calcCount);
    
    Mutation: 是全局状态中唯一修改数据的地方
        1、在模板中 <el-button @click="$store.commit('add')">加 1</el-button>
        2、在 js 中 this.$store.commit('add') 如果有参数可以在 commit('add', 参数)
        3、通过映射的方式 
            import { mapMutations } from 'vuex'
            methods: { ...mapMutations(['addNum']) }
            this.addNum(5)
        4、在组合式 API 中可以通过 
            import { useStore } from 'vuex'
            const store = useStore()
            store.commit('add')

    Action: 异步修改数据的地方，需要调用同步方法
        1、在模板中 this.$store.dispatch('addAction')
        2、在 js 中 this.$store.dispatch('addAction') 如果有参数可以在 dispatch('addAction', 参数)
        3、通过映射的方式 
            import { mapActions } from 'vuex'
            methods: { ...mapActions(['addAction']) }
            this.addAction()
        4、在组合式 API 中可以通过 
            import { useStore } from 'vuex'
            const store = useStore()
            store.dispatch('add')

    Module:
        在多人合作开发的时候可以使用状态模块
        在分功能的时候，如一个大的功能我们可以分成一个状态模块

*/

import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'

export default {
    mounted() {
        console.log(this.$store.state.count);
        console.log(this.$store.getters.calcCount);
    },
    computed: {
        ...mapState(['count']),
        ...mapGetters(['calcCount'])
    },
    methods: {
        ...mapMutations(['addNum']),
        ...mapActions(['addAction'])
    }
}
</script>
<template>
    <div>
        <h1> {{ $store.state.count }} </h1>
        <h1> {{ count }} </h1>
        <h1> {{ $store.getters.calcCount }} </h1>
        <h1> {{ calcCount }} </h1>

        <el-button @click="() => {
            this.$store.commit('add')
        }">加 1</el-button>
        <el-button @click="$store.commit('add')">加 1</el-button>

        <el-button @click="() => {
            this.addNum(5)
        }">加指定数</el-button>
        <el-button @click="$store.commit('addNum', 6)">加指定数</el-button>

        <hr>

        <el-button @click="() => {
            this.$store.dispatch('addAction')
        }">加 1</el-button>
        <el-button @click="$store.dispatch('addAction')">加 1</el-button>

        <el-button @click="() => {
            this.addAction()
        }">加 1</el-button>


        <hr>

        <!-- 获取值的时候需要先 点模块名称 -->
        <h1> {{ $store.state.app.name }} </h1>
        <el-button @click="() => {
            // 修改的时候无需点模块名称
            this.$store.commit('changeName', '李四')
        }">修改 Name</el-button>

    </div>
</template>